<template>
	<!-- <scroll-view scroll-y class="container" :style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}"> -->
		<view class="detail-info">
			<navBar :title="fillForm.pageType == 'look' ? '查看详情' : '修改详情'" @goBack="uni.navigateBack()"></navBar>
			<view class="tips-title">{{ formType == 1 ? '出土情况' : (formType == 2 ? '水泥情况' : (formType == 3 ? '柴油情况' : '')) }}</view>
			<view class="fill-report">
				<view class="form">
					<view class="form-item" @click="changeProject">
						<view class="label" :class="{'required':fillForm.pageType !== 'look'}">项目名称</view>
						<view class="form-content">
							<view class="form-text">{{ fillForm.projectInfo.name || '' }}</view>
							<u-icon name="arrow-down" color="#a7aebd" size="16" v-if="isUpdate"></u-icon>
						</view>
					</view>
					
					<view class="form-item" v-if="formType != 3">
						<view class="label" 
							:class="{'required':fillForm.pageType !== 'look'}">
							供应方式
						</view>
						<view class="form-content">
							<view class="form-text">{{  formType == 1 ? (fillForm.projectInfo.tfSupplier || '') : (fillForm.projectInfo.snSupplier || '') }}</view>
						</view>
					</view>
					
					<view @click="openDatePicker" class="form-item">
						<view class="label" 
							:class="{'required':fillForm.pageType !== 'look' && (formType == 1 && fillForm.projectInfo.tfSupplier != '甲供') || (formType == 2 && fillForm.projectInfo.snSupplier != '甲供') ||  (fillForm.pageType !== 'look' && formType == 3 )}">
							{{ formType == 1 ? '出场日期' : (formType == 2 ? '进场日期' : (formType == 3 ? '进场日期' : '')) }}
						</view>
						<view class="form-content">
							<view class="form-text">{{ fillForm.approachTime  || ''}}</view>
							<u-icon name="arrow-down" color="#a7aebd" size="16" v-if="isUpdate"></u-icon>
						</view>
					</view>

					<view class="form-item">
						<view class="label" :class="{'required':fillForm.pageType !== 'look' && (formType == 1 && fillForm.projectInfo.tfSupplier != '甲供') || (formType == 2 && fillForm.projectInfo.snSupplier != '甲供') ||  (fillForm.pageType !== 'look' && formType == 3 ) }">{{ formType == 1 ? '出场数量' : (formType == 2 ? '进场数量' : (formType == 3 ? '进场数量' : '')) }}</view>
						<view class="form-content">
							<view class="form-content">
								<u--input inputAlign="right" :disabled="!isUpdate" disabledColor="#fff" v-model="fillForm.number" type="digit" placeholder="请输入数量" border="none" />
								{{ formType == 1 ? (fillForm.projectInfo.tfUnit || '') : (formType == 2 ? (fillForm.projectInfo.snUnit || '') : (formType == 3 ? (fillForm.projectInfo.cyUnit || '') : '')) }}
							</view>
						</view>
					</view>
					<view class="form-item" v-if="fillForm.pageType === 'look'">
						<view class="label" :class="{'required':fillForm.pageType !== 'look'}">累计数量</view>
						<view class="form-content">
							<view class="form-content">
								<u--input inputAlign="right" :disabled="!isUpdate" disabledColor="#fff" v-model="fillForm.sumNumber" type="digit" placeholder="请输入数量" border="none" />
								{{ formType == 1 ? (fillForm.projectInfo.tfUnit || '') : (formType == 2 ? (fillForm.projectInfo.snUnit || '') : (formType == 3 ? (fillForm.projectInfo.cyUnit || '') : '')) }}
							</view>
						</view>
					</view>
					
					<view  class="form-item" style="border-bottom: none;">
						<view class="label" :class="{'required':fillForm.pageType !== 'look' && (formType == 1 && fillForm.projectInfo.tfSupplier != '甲供') || (formType == 2 && fillForm.projectInfo.snSupplier != '甲供') ||  (fillForm.pageType !== 'look' && formType == 3 ) }">备注</view>
					</view>
					<view  style="border-bottom: none;padding: 0 30rpx;">
						<u--textarea v-model="fillForm.remark" :disabled="!isUpdate" placeholder="请输入 如:4号井,3阶段" confirmType="done" height="100" :maxlength="-1" :adjustPosition="false" :autoHeight="false"></u--textarea>
					</view>
					<view  class="form-item" style="border-bottom: none;margin-top: 60rpx;">
						<view class="label" :class="{'required':fillForm.pageType !== 'look' && (formType == 1 && fillForm.projectInfo.tfSupplier != '甲供') || (formType == 2 && fillForm.projectInfo.snSupplier != '甲供') ||  (fillForm.pageType !== 'look' && formType == 3 ) }">验收人签名</view>
					</view>
					<view v-if="!isUpdate" style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20rpx; padding-left: 40rpx;">
						<u--image  @click="lookImage(imagePath)" :src="imagePath" width="300px" height="100px" v-if="imagePath"></u--image>
						<u-empty v-else mode="data" text="暂无图片" height="80" width="120" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
					</view>
					<signature v-else :footerShow="true" canvasId="canvas1"  ref="refSign" @savePath="getName1" @clearPath="clearName" :imagePath="imagePath"></signature>
				</view>
				<u-datetime-picker @confirm="confirmBuildEndDate" @cancel="buildDatePicker = false" v-model="timeVal"
					:show="buildDatePicker" :maxDate="(new Date()).getTime()" mode="date" />
			</view>
			
			<view class="footer-button">
				<view class="button-placeholder"></view>
				<view class="button-group" v-if="!isUpdate">
					<button @click="backPage" :loading="isLoading" class="button-gray">关闭</button>
					<button @click="editPage" :loading="isLoading" class="button-primary">修改</button>
				</view>
				<view class="button-group" v-else>
					<button @click="$u.throttle(clickSubmit, 500)" :loading="isLoading" class="button-primary">提交</button>
				</view>
			</view>
		</view>
	<!-- </scroll-view> -->
</template>

<script>
	import { mapGetters } from "vuex";
	import { getSystemHeightInfo, isPositiveInteger, imgFun, getFormCheckResult } from "@/utils/common.js";
	import { handleFormatDate, compareDate } from "@/utils/date.js";
	import fileMixin from "@/mixins/file.js";
	import mixins from "@/utils/mixins.js"
	import signature from "@/subpackage-mjs/pages/comoponents/signature.vue";
	import { mjsSoil_save, mjsCement_save, mjsDiesel_save } from "@/api/mjs.js"
	import { uploadFile } from '@/utils/request'
	import {getPicture} from '@/api/doc.js'
	export default {
		name: "fill-report",
		mixins: [fileMixin, mixins],
		components:{
			signature
		},
		props: {
			// formType: {
			// 	type:String,
			// 	default:'1'
			// }
		},
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				timeVal: Number(new Date()),
				mainContent:'',
				// 填报表单
				fillForm: {
					approachTime: '',
					projectInfo:{},
					remark:'',
					docId:'',
					projectId:uni.getStorageSync('isOwner')
				},
				buildDatePicker: false,
				// 是否在加载中
				isLoading: false,
				imagePath: '',
				isUpdate:false,
				formType:'1',
				
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		watch: {},
		mounted() {
			this.initContainerData();
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('getDetailsInfo', async (item) => {
				this.formType = item.data.formType 
				this.fillForm = {...item.data}
				
				this.fillForm.approachTime = this.getDate(item.data.approachTime)
				this.fillForm.id = item.data.id
				this.fillForm.projectInfo = {
					name:item.data.mpName,
					id:item.data.mpId,
					tfSupplier:item.data.tfSupplier || '',
					snSupplier:item.data.snSupplier || '',
					// unit:item.data.unit,
				}
				this.formType == 1 ? this.fillForm.projectInfo.tfUnit = item.data.unit : (this.formType == 2 ? (this.fillForm.projectInfo.snUnit = item.data.unit) : (this.formType == 3 ? (this.fillForm.projectInfo.cyUnit = item.data.unit) : ''))
				if(item.data.docId) {
					this.imagePath = (await this.getItemImage(item.data.docId))[0].url
				}
				console.log(this.fillForm, 'getDetailsInfo')
				console.log(this.imagePath, '图片路径')
				// this.$forceUpdate()
			})
			this.eventChannel = eventChannel
		},

		methods: {
			changeProject() {
				if(!this.isUpdate) return
				if(this.formType == 1) {
					this.fillForm.projectInfo.tfSupplier = ''
				}else{
					this.fillForm.projectInfo.snSupplier = ''
				}
				uni.navigateTo({
					url:`/subpackage-mjs/pages/dailyTaskList/select-task-project`,
					events:{
						getRetrunData: (data) => {
							console.log(data)
							for(let key in data.data) {
								this.$set(this.fillForm.projectInfo, key, data.data[key])
							}
							this.$forceUpdate()
						}
					},
				})
				
			},
			openDatePicker() {
				if(!this.isUpdate) return
				this.buildDatePicker = true
			},
			lookImage(url) {
				// 预览图片
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['保存图片']
					}
				});
			},
			async getItemImage(docId) {
				return await new Promise((resolve, reject) => {
					getPicture({
						docId
					}).then(res => {
						resolve(res.result.map(it => ({
							url: this.$config.IMG_FILE_URL + it.fileName,
							id: it.id
						})));
					}).catch(err => reject(err))
				})
			},
			getTmepFilePath(path) {
				return new Promise(async resolve => {
					uni.compressImage({
						src:path,
						quality: 80,
						success: async res => {
							let data = await uploadFile({
								url: "rest/doc/uploadDoc",
								formData:{},
								filePath:res.tempFilePath
							})
							resolve(JSON.parse(data))
						},
						fail: err => {
							resolve({})
						}
					 })
				})

			},
			clearName() {
				console.log('清除')
				this.tempPath = ''
				this.imagePath = ''
				this.$refs.refSign.isDrawing = false
			},
			
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight } = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + 70;
			},

			/** 保存每日交底填报的内容 */
			handleSaveFilleport() {
				if(!this.fillForm.projectInfo.name)  return this.$message('请选择项目!')
				if((this.formType == 1 && this.fillForm.projectInfo.tfSupplier === '乙供') || (this.formType == 2 && this.fillForm.projectInfo.snSupplier === '乙供') ||  (this.formType == 3)) {
					if(!this.fillForm.approachTime)  return this.$message('请选择日期!')
					if(!this.fillForm.number)  return this.$message('请输入数量!')
					if(!this.fillForm.remark)  return this.$message('请输入备注!')
					if(this.$refs.refSign && !this.$refs.refSign.isDrawing && !this.imagePath) return this.$message('请签名!')
				}
				return new Promise(async resolve => {
					// if((this.formType == 1 && this.fillForm.projectInfo.tfSupplier === '乙供') || (this.formType == 2 && this.fillForm.projectInfo.snSupplier === '乙供') ||  (this.formType == 3)) {
						if(this.$refs.refSign.isDrawing) {
							let response = await  this.$refs.refSign.finish()
							let temp =  await this.getTmepFilePath(response)
							if(temp) {
								this.fillForm.docId = temp.result.id
							}
						}
					// }					

					let api = this.formType == 1 ? mjsSoil_save : (this.formType == 2 ? mjsCement_save : (this.formType == 3 ? mjsDiesel_save : ''))
					api({...this.fillForm, mpId:this.fillForm.projectInfo.id,id:this.fillForm.id ? this.fillForm.id : undefined}).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 1000,
						});
						this.initFillForm();
						uni.navigateBack({
							delta:1,
							success() {
								uni.$emit('updateList', {needRefersh:true})
							}
						})
						
						resolve();
					});
				});
			},
			backPage() {
				uni.navigateBack()
			},
			editPage() {
				this.isUpdate = true
				this.fillForm.pageType = 'edit'
			},
			/** 点击提交按钮 */
			async clickSubmit() {
				// 调用接口...
				if (!this.isLoading) {
					this.isLoading = true;
					await this.handleSaveFilleport();
					this.isLoading = false;
				}
			},

			/** 初始化表单 */
			initFillForm() {
				this.$set(this.fillForm, 'remark', '')
				this.$set(this.fillForm, 'docId', '')
				this.$set(this.fillForm, 'number', '')
				this.$set(this.fillForm, 'approachTime', this.getDate(new Date()))
				this.$set(this.fillForm, 'projectInfo', {})
				this.imagePath = ''
				this.$refs.refSign.clear()
			},
			confirmBuildEndDate(event) {
				this.fillForm.approachTime = handleFormatDate(event.value, 1)
				this.buildDatePicker = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.detail-info {
		/* #ifdef MP-WEIXIN */
		padding-top: 180rpx;
		/* #endif */
	}
	.fill-report {
		.form {
			background: #fff;
			// padding-top: 26upx;

			.form-item {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 30upx;
				border-bottom: 1px solid #e2e5ed;

				&:last-of-type {
					border-bottom: none;
				}

				.label {
					color: #445469;
					line-height: 34upx;
					flex-shrink: 0;
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 32rpx;
					.icon {
						width: 50rpx;
						padding: 6rpx 20rpx;
						clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
						height: 24rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 24rpx;
						background: linear-gradient(90deg,#ff5f2c  0%, #ff9e39 100%);
						text-align: center;
						opacity: 1;
					}
				}

				.form-content {
					color: #22204e;
					display: flex;
					align-items: center;
				}

				.form-text {
					line-height: 58upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 302upx;
				}

				.form-text.none {
					opacity: .7;
					font-size: 30rpx;
				}

				.u-icon {
					margin-left: 40upx;
				}

				.uicon-close-circle-fill {
					margin-left: 32upx;
				}

				.u-input {
					width: 340upx;
					text-align: right;

					::v-deep .u-input__content__field-wrapper {
						margin-right: 24upx;
					}

					::v-deep .uni-input-wrapper {
						text-align: right;
					}
				}

				.u-switch {
					margin-right: 30upx;
				}
			}
			.form-item.none {
				border-bottom: none;
				height: 60upx;
			}
			
			.form-item.dash {
				border-top: 1px dashed #E0E7F6; 
				border-bottom: 1px dashed #E0E7F6;
				&:last-of-type {
					border-bottom: none;
				}
			}


			.no-inline {
				display: block;
				height: auto;

				.label {
					line-height: 100upx;
				}
			}
		}


	}

	.fill-report.mar-t {
		padding-top: 26upx;
	}
	.required {
		&::before {
			content: "*";
			color: #ff6a6a;
		}
	}

	.tips-title {
		height: 100rpx;
		background: #F5F7FA;
		color: #22204E;
		font-size: 36rpx;
		font-weight: 600;
		line-height: 100rpx;
		padding-left: 30rpx;
	
	}
</style>